<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="字典管理" bodyClass="white-bg"  libs=["bootstrapSelect","colorpicker"]/>
<div class="wrapper wrapper-content ibox-content">
<@f.form id="form-dict-add" class="form-horizontal">
    <@f.hidden  id="appNo" name="appNo" value="${appNo}"/>
    <div class="form-group">
        <label class="col-sm-3 control-label">${i18n("所属应用编码")}：</label>
        <div class="col-sm-8">
            <@f.plaintext value="${appNo}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label "><span style="color: red; ">*</span>${i18n("字典键值")}：</label>
        <div class="col-sm-8">
            <@f.input name="dictValue" required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label "><span style="color: red; ">*</span>${i18n("字典标签")}：</label>
        <div class="col-sm-8">
            <@f.input name="dictLabel" required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">${i18n("字典类型")}：</label>
        <div class="col-sm-8">
            <@f.input name="dictType" value="${dictType}" readonly=true required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>${i18n("系统内置")}：</label>
        <div class="col-sm-8">
            <@f.radio name="isSys" dictType="sys_yes_no"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">${i18n("CSS类名")}：</label>
        <div class="col-sm-8">
            <@f.input name="cssClass"  helpTip="${i18n('如:class=\"red\", 请填写:red')}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">${i18n("CSS样式")}：</label>
        <div class="col-sm-8">
            <@f.input name="cssStyle" butClass="fa fa-square" helpTip="${i18n('如:style=\"color:red\", 请填写: color:red')}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>${i18n("字典排序")}：</label>
        <div class="col-sm-8">
            <@f.input name="dictSort" required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">${i18n("回显样式")}：
            <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="${i18n("回显样式")}"
               data-content="${i18n('table表格字典列显示样式属性')}">
                <i class="fa fa-question-circle-o" style="color: orange"></i></a>
        </label>
        <div class="col-sm-8">
            <select name="listClass" class="form-control">
                <option value="">---${i18n("请选择")}---</option>
                <option value="default">${i18n("默认")}--default</option>
                <option value="primary">${i18n("主要")}--primary</option>
                <option value="success">${i18n("成功")}--success</option>
                <option value="info">${i18n("信息")}--info</option>
                <option value="warning">${i18n("警告")}--warning</option>
                <option value="danger">${i18n("危险")}--danger</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>${i18n("系统默认")}：</label>
        <div class="col-sm-8">
            <@f.radio name="isDefault" dictType="sys_yes_no"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>${i18n("状态")}：</label>
        <div class="col-sm-8">
            <@f.radio name="status"  dictType="sys_normal_disable"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">${i18n("备注")}：</label>
        <div class="col-sm-8">
            <@f.textarea name="remark" rows="3"/>
        </div>
    </div>
</@f.form>
</div>
<@footer>
<script>
    var prefix = baseURL + "sys/dict/data";

    /*
	 * 颜色拾取
	 */
	$('#cssStyle').next('.input-group-addon').colorpicker().on('hidePicker',function(event){
		var val = $('#cssStyle').val();
		if(val.indexOf("#") > 0){
			var css = val.substr(0,val.indexOf("#")) + event.color.toHex() + val.substring(val.indexOf("#") + 7);
			$('#cssStyle').val(css);
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',css);
		}else if(val.length > 0){
			$('#cssStyle').val(val+";color:"+ event.color.toHex());
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',val+";color:"+ event.color.toHex());
		}else{
			$('#cssStyle').val("color:"+ event.color.toHex());
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',"color:"+ event.color.toHex());
		}
	})
   .on('changeColor',function(event){
		var val = $('#cssStyle').val();
		if(val.indexOf("#") > 0){
			var css = val.substr(0,val.indexOf("#")) + event.color.toHex() + val.substring(val.indexOf("#") + 7);
			$('#cssStyle').val(css);
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',css);
		}else if(val.length > 0){
			$('#cssStyle').val(val+";color:"+ event.color.toHex());
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',val+";color:"+ event.color.toHex());
		}else{
			$('#cssStyle').val("color:"+ event.color.toHex());
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',"color:"+ event.color.toHex());
		}
	});
    
    $("#form-dict-add").validate({
        rules:{
            dictSort:{
                digits:true
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if (opt.validate.form()) {
            opt.operate.save(prefix + "/add", $('#form-dict-add').serialize());
        }
    }
</script>
</@footer>
</@pageTheme>